<template>
  <LeeRoot
    desc="橙续缘的Web前端个人简历"
    title="Web前端工程师简历 | 橙续缘"
    keywords="Web前端，前端开发，橙续缘，李晓辉，橙续缘的简历，李晓辉的简历，Web前端个人简历"
    v-if="$store.state.assetLoaded"
  >
    <div class="lee-show-pc" >
      <LeeHeader
        :avatar="$store.state.asset.images.Avatar"
        :menu="menu"
        :menu-active="menuActive"
        @on-click-menu="onClickMenu"
      />
      <LeeFullpage ref="fullpage">
        <LeeSectionOne slot="section" />
        <LeeSectionTwo slot="section" />
        <LeeSectionThree slot="section" />
        <LeeSectionFour slot="section" />
      </LeeFullpage>
      <LeeYouPaiPC />
      <LeeChangYanButton @on-click="openChangYan" />
    </div>

    <LeeMobile class="lee-show-mb" />
    <LeeChangYan ref="changyan" sid="test" appid="cyujTWtR1" />
    <div class="lee-mobile-copy lee-show-mb">
      <div style="margin-bottom: 6px">
        <span>总访问量：</span>
        <span>{{ $store.state.countor.all }}</span>
        <span>今日访问量：</span>
        <span>{{ $store.state.countor.today }}</span>
      </div>
      <div>
        <span>© 橙续缘 |</span> 
        <a href="http://www.beian.gov.cn">&nbsp;粤ICP备18083394号</a>
      </div>
    </div>
  </LeeRoot>
  <div class="lee-loading" v-else>
    <img :src="SvgLoading">
  </div>
</template>

<script>
import LeeSectionOne from './section/one';
import LeeSectionTwo from './section/two';
import LeeSectionThree from './section/three';
import LeeSectionFour from './section/four';
import SvgLoading from 'asset/svg/puff.svg';
import LeeYouPaiPC from 'framework/components/youpai/pc';
import LeeChangYan from 'framework/components/changyan';
import LeeChangYanButton from 'framework/layout/components/changyan';

export default {
  data() {
    return {
      menu: [
        { title: this.$store.getters.lang[4], index: 0 },
        { title: this.$store.getters.lang[5], index: 1 },
        { title: this.$store.getters.lang[6], index: 2 },
        { title: this.$store.getters.lang[7], index: 3 },
      ],
      menuActive: 0,
      SvgLoading,
    };
  },
  components: {
    LeeSectionOne,
    LeeSectionTwo,
    LeeSectionThree,
    LeeSectionFour,
    LeeYouPaiPC,
    LeeChangYan,
    LeeChangYanButton,
  },
  methods: {
    onClickMenu({ item }) {
      this.$refs.fullpage.setCurrent(item.index + 1);
    },

    openChangYan() {
      this.$refs.changyan.open();
    },
  },
  async mounted() {
    await this.$store.dispatch('loadAsset');
    document.addEventListener('contextmenu', (e) => e.returnValue = false);
    this.$evts.on('fullpage#scroll', ({ current }) => this.menuActive = current);
  },
};
</script>

<style lang="less" scoped>
.lee-show-pc,
.lee-show-mb {
  display: none;
}

.lee-loading {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
  background-color: #2C3E50;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 100px;
  }
}

.lee-mobile-copy {
  color: #fff;
  background-color: #000;
  padding: 20px;
  text-align: center;

  a {
    color: #fff;
    text-decoration: none;
  }
}

@media screen and (max-width: 750px) {
  .lee-show-mb {
    display: block;
  }
}
@media screen and (min-width: 750px) {
  .lee-show-pc {
    display: block;
  }
}
</style>
